<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">商品管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-input clearable @clear="getItemList" placeholder="请输入搜索内容" suffix-icon="el-icon-search"
              v-model="query.search" @keypress.native.enter="getItemList"></el-input>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" @click="addDialogFormVisible = true">添加商品</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="text item">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="id" label="ID" width="80" />
          <el-table-column prop="name" label="商品名称" width="380" />
          <el-table-column prop="price" label="商品价格" />
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" icon="el-icon-edit" circle @click="handleEdit(scope.row)">
              </el-button>
              <el-button size="mini" type="danger" icon="el-icon-delete" circle @click="handleDelete(scope.row)">
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination :current-page="query.currentPage" :page-sizes="[2, 4, 6]" :page-size="query.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="query.total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
        </el-pagination>
      </div>
      <!-- 添加商品 -->
      <el-dialog title="添加商品" :visible.sync="addDialogFormVisible">
        <el-form ref="itemForm" :model="itemForm" :rules="itemFormRule">
          <el-form-item label="商品名称" label-width="80px" prop="name">
            <el-input v-model="itemForm.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品价格" label-width="80px" prop="price">
            <el-input v-model="itemForm.price" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品图片" label-width="80px">
            <el-input v-model="itemForm.img" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addDialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addItem">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 修改商品 -->
      <el-dialog title="修改商品" :visible.sync="editDialogFormVisible">
        <el-form ref="editItemForm" :model="itemForm" :rules="itemFormRule">
          <el-form-item label="商品ID" label-width="30px" prop="id">
            <el-input v-model="itemForm.id" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品名称" label-width="80px" prop="name">
            <el-input v-model="itemForm.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品价格" label-width="80px" prop="price">
            <el-input v-model="itemForm.price" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品图片" label-width="80px">
            <el-input v-model="itemForm.img" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editDialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="editItem">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [],
        query: {
          search: '',
          currentPage: 1,
          pageSize: 2,
          total: 0,
        },
        //添加商品
        addDialogFormVisible: false,
        //修改商品
        editDialogFormVisible: false,
        itemForm: {
          id: 0,
          name: '',
          price: 0,
          img: ''
        },
        itemFormRule: {
          name: [{
              require: true,
              message: "请输入商品名称",
              trigger: 'blur'
            },
            {
              min: 3,
              max: 30,
              message: "长度在 3 到 30个字符",
              trigger: 'blur'
            },
          ],
          price: [{
              require: true,
              message: "请输入商品价格",
              trigger: 'blur'
            },
            {
              min: 1,
              max: 4,
              message: "价格区间在 1 到 10000",
              trigger: 'blur'
            },
          ],
        }
      }
    },
    mounted() {
      this.getItemList()
    },
    methods: {
      async getItemList() {
        const {
          data: res
        } =
        await this.$axios.post('/getItemList', this.query)
        console.log(res)
        this.tableData = res.result
        //数据总数
        this.query.total = res.total
      },
      handleSizeChange(val) {
        this.query.pageSize = val
        this.getItemList()
      },
      handleCurrentChange(val) {
        this.query.currentPage = val
        this.getItemList()
      },
      addItem() {
        this.$refs.itemForm.validate(async valid => {
          if (!valid) return
          const {
            data: res
          } =
          await this.$axios.post('/addItem', this.itemForm)
          if (JSON.parse(res).code != 200) return this.$message.error("添加商品失败")
          //关闭dialog
          this.addDialogFormVisible = false
          this.getItemList()
          this.$message.success("添加商品成功")
        })
      },
      handleDelete(row) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const {
            data: res
          } = await this.$axios.post('/delItemById', {
            id: row.id
          })
          if (JSON.parse(res).code != 200) return this.$message({
            type: 'info',
            message: '删除失败'
          });
          this.getItemList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      async handleEdit(row) {
        const {
          data: res
        } =
        await this.$axios.get('/getItemById', {
          data: {
            id: row.id
          }
        })
        if (res.code != 200) return this.$message.error("获取商品失败")
        this.itemForm = res.result[0]
        this.editDialogFormVisible = true
      },
      editItem() {
        this.$refs.editItemForm.validate(async valid => {
          if (!valid) return
          const {
            data: res
          } =
          await this.$axios.post('/editItem', this.itemForm)
          if (JSON.parse(res).code != 200) return this.$message.error("修改商品失败")
          //关闭dialog
          this.editDialogFormVisible = false
          this.getItemList()
          this.$message.success("修改商品成功")
        })
      }
    }
  }
</script>

<style scoped="scoped">
  .el-pagination {
    margin-top: 10px;
  }

  .text {
    font-size: 14px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
  
  .el-breadcrumb {
    margin-bottom: 10px;
  }
</style>
